<template>
  <div class="myTable" >
    <el-row class="searchRow">
      <el-input style="width:200px"
                placeholder="类别"
                prefix-icon="el-icon-search"
                class="mr15"
                v-model="search.evaluationType">
      </el-input>
      <el-button type="success" @click="query(1)">查询</el-button>
      <el-button  type="default" @click="clear()" >重置</el-button>

      <el-button type="primary" class="pull-right" icon="el-icon-plus" @click="showEdit()" >添加</el-button>
    </el-row>

    <el-table :data="tableData.data" class="mt20" :show-header="true" :header-row-class-name="'tableHead'" :header-cell-class-name="'tableHeadCell'">
      <el-table-column  type="index" label="NO" width="60px" :index="indexMethod"></el-table-column>
      <el-table-column label="类别" width="200px" prop="">
        <template slot-scope="scope">
          <el-link type="primary" :underline=false class="zhouText" @click="showDetail(scope.row)">{{scope.row.evaluationType}}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="适用区域" width="200px" prop="applicableArea">  </el-table-column>
      <el-table-column label="适用对象(及除外情况)" prop="applicableObject"></el-table-column>
      <el-table-column label="应用期限" width="320px" prop="applicationPeriod" >     </el-table-column>  .
      <el-table-column label="备注" width="200px" prop="remark" ></el-table-column>  .
          <el-table-column  label="操作" width="120px">
        <template slot-scope="scope">
          <span style="white-space: nowrap">
            <el-button type="primary" icon="el-icon-edit" size="mini"	@click="showEdit(scope.row)" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)" circle></el-button>
        </span>
       </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="query" style="margin-top: 25px"
                   layout="total,prev, pager, next" :total="tableData.rowsCount" background :page-size="tableData.pageSize"> </el-pagination>
    <el-dialog   width="60%"   :title='copy.evaluationType' class="fullDialog" :visible.sync="detailDialogVisible">
      <div class="textWrap">
        <p class="textLeft content myWord" v-html="copy.applicationMethod">
        </p>
      </div>
    </el-dialog>


    <el-dialog   width="60%"   :title='(copy.id?"修改":"添加")+"评价"'     :visible.sync="dialogVisible" >

      <el-form ref="copy" :model="copy" label-width="80px">
        <el-form-item label="类别">
          <el-input v-model="copy.evaluationType" ></el-input>
        </el-form-item>
        <el-form-item label="适用区域">
          <el-input v-model="copy.applicableArea" ></el-input>
        </el-form-item>
        <el-form-item label="适用对象">
          <el-input type="textarea"  v-model="copy.applicableObject" ></el-input>
        </el-form-item>
        <el-form-item label="应用方式">
          <el-input type="textarea"  v-model="copy.applicationMethod" ></el-input>
        </el-form-item>
        <el-form-item label="应用期限">
          <el-input  v-model="copy.applicationPeriod" ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="copy.remark" ></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                 <el-button type="primary" @click="save()">确 定</el-button>
            </span>
    </el-dialog>



  </div>
</template>

<script>
  /* eslint-disable no-unused-vars */

  export default {
    name: "evaluateProject",
    data: function() {
      return {
        search:{evaluationType:""},
        tableData: {},
        copy:{evaluationType:""},
        dialogVisible:false,
        detailDialogVisible:false
      }
    },
    methods:{
      indexMethod:function(index){
        return (this.tableData.curPageNO-1)*10+index+1;
      },
      query:function(pageNo){
        let vm = this;
        vm.search.curPageNO = pageNo||vm.tableData.curPageNO;
        vm.search.pageSize = 10;
        this.$http.post("/yczmq/bigScreen/projectAssess/page",window.changeDataType(vm.search)).then(resp => {
          if(resp.status == 0){
            vm.tableData = resp.data;
          }
        })
      },
      clear(){
        this.search = {};
      },
      del:function(item){
        let vm = this;
        confirm(this,'确认删除此记录?',()=>{
          this.$http.get("/yczmq/projectAssess/delete/{id}".replace("{id}",item.id)).then(resp => {
            if (resp.status == 0) {
              window.msg(vm,"删除成功:"+item.evaluationType);
              vm.query();
            }
          })
        })
      },
      showDetail: function (item) {
        let vm = this;
        vm.copy.evaluationType = item.evaluationType;
        vm.copy.applicationMethod = item.applicationMethod;
        vm.detailDialogVisible = true;
      },

      showEdit: function (item) {
        let vm = this;
        if (item) {
          vm.copy.id = item.id;
          vm.copy.evaluationType = item.evaluationType;
          vm.copy.applicableArea = item.applicableArea;
          vm.copy.applicableObject = item.applicableObject;
          vm.copy.applicationMethod = item.applicationMethod;
          vm.copy.applicationPeriod = item.applicationPeriod;
          vm.copy.remark = item.remark;
          // Object.assign(vm.copy, item);
        }else{
          vm.copy.evaluationType = "";
          vm.copy.applicableArea = "";
          vm.copy.applicableObject = "";
          vm.copy.applicationMethod = "";
          vm.copy.applicationPeriod = "";
          vm.copy.remark  = "";
        }
        vm.dialogVisible = true;
      },
      save:function() {
        let vm = this;
        vm.$http.post("/yczmq/projectAssess/saveOrEdit",vm.copy).then(resp=>{
          if(resp.status == 0){
            this.dialogVisible = false;
            vm.query();
          }
        })
      }
    },
    created(){
      this.query(1);
    }
  }
</script>
<style scoped>
</style>
